import * as React from 'react';
import { AreaType } from '../types';
import { Icon } from './icon';
import Dropdown from 'rc-dropdown';
import 'rc-dropdown/assets/index.css';
import './DropdownCreateButton.css';

const iconNameAreaType: { [key: AreaType]: string } = {
  'point': 'icon-point',
  'circle': 'icon-circle',
  'rectangle': 'icon-rectangle',
  'polygon': 'icon-polygon'
}
type CreationType = 'sibling' | 'child';
interface DropdownCreateButtonProps {
  defaultAreaType?: AreaType;
  disabled?: boolean;
  type: CreationType;
  onCreate: (data: any, type: CreationType) => void;
}
const DropdownCreateButton = ({ defaultAreaType, disabled = false, type, onCreate }: DropdownCreateButtonProps) => {
  const [areaType, setAreaType] = React.useState<AreaType>(defaultAreaType ?? 'point');
  const handleCreate = React.useCallback(()=>{
    if (!disabled) onCreate?.({ areaType }, type);
  },[areaType, type, onCreate, disabled]);
  const handleChangeCreation = React.useCallback((areaType1: AreaType) => {
    setAreaType(areaType1);
    if (!disabled) onCreate?.({ areaType: areaType1 }, type);
  }, [onCreate]);
  const menuCallback = React.useMemo(() => (
    <ul tabIndex={0} className="nodeSelectList">
      <li className="nodeItem" onClick={() => handleChangeCreation('point')}><Icon name="icon-point" color={'#000'} />点</li>
      <li className="nodeItem" onClick={() => handleChangeCreation('polygon')}><Icon name="icon-polygon" color={'#000'} />多边形</li>
      <li className="nodeItem" onClick={() => handleChangeCreation('rectangle')}><Icon name="icon-rectangle" color={'#000'} />矩形</li>
      <li className="nodeItem" onClick={() => handleChangeCreation('circle')}><Icon name="icon-circle" color={'#000'} />圆形</li>
    </ul>
  ), [handleChangeCreation]);

  return (
    <div className={"createNodeDiv"+ (disabled? ' createNodeDiv-disable':'')}>
      <div className="createNodeLeft" onClick={handleCreate}>
        <Icon name={iconNameAreaType[areaType]} color={'#fff'} />
        <div style={{ marginLeft: 5 }}>{type === 'sibling' ? '同级节点' : '子级节点'}</div>
      </div>
      <Dropdown
        trigger={['click']}
        overlay={!disabled ? menuCallback : <></>}
        animation="slide-up"
      // onVisibleChange={onVisibleChange}
      >
        <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
          <Icon name="icon-arrowdown" color={'#fff'} />
        </div>
      </Dropdown>
    </div>
  )
}
export default DropdownCreateButton;